<template>
  <div id="app">
    <!-- 树状图组件 -->
    <TreeChart :json="data" :class="{landscape: landscape.length}" @click-node="clickNode" />
  </div>
</template>

<script>
import TreeChart from "./TreeChart.vue";

export default {
  name: 'app',
  components: {
    TreeChart
  },
  data() {
    return {
      landscape: [], // 横向布局数组
      data: {
        name: 'root', // 根节点名称
        image_url: "https://static.refined-x.com/static/avatar.jpg", // 根节点图片URL
        children: [
          {
            name: 'children1', // 子节点1名称
            image_url: "https://static.refined-x.com/static/avatar.jpg", // 子节点1图片URL
            children: [
              {
                name: 'grandchild', // 孙子节点名称
                image_url: "https://static.refined-x.com/static/avatar.jpg" // 孙子节点图片URL
              },
              {
                name: 'grandchild2', // 孙子节点2名称
                image_url: "https://static.refined-x.com/static/avatar.jpg" // 孙子节点2图片URL
              },
              {
                name: 'grandchild3', // 孙子节点3名称
                image_url: "https://static.refined-x.com/static/avatar.jpg", // 孙子节点3图片URL
                children: [
                  {
                    name: 'grandchild', // 孙孙节点名称
                    image_url: "https://static.refined-x.com/static/avatar.jpg" // 孙孙节点图片URL
                  },
                  {
                    name: 'grandchild2', // 孙孙节点2名称
                    image_url: "https://static.refined-x.com/static/avatar.jpg" // 孙孙节点2图片URL
                  },
                  {
                    name: 'grandchild3', // 孙孙节点3名称
                    image_url: "https://static.refined-x.com/static/avatar.jpg" // 孙孙节点3图片URL
                  }
                ]
              }
            ]
          },
          {
            name: 'children2', // 子节点2名称
            image_url: "https://static.refined-x.com/static/avatar.jpg", // 子节点2图片URL
            children: [
              {
                name: 'grandchild', // 孙子节点名称
                image_url: "https://static.refined-x.com/static/avatar.jpg" // 孙子节点图片URL
              },
              {
                name: 'grandchild2', // 孙子节点2名称
                image_url: "https://static.refined-x.com/static/avatar.jpg" // 孙子节点2图片URL
              },
              {
                name: 'grandchild3', // 孙子节点3名称
                image_url: "https://static.refined-x.com/static/avatar.jpg" // 孙子节点3图片URL
              }
            ]
          }
        ]
      }
    }
  },
  methods: {
    // 节点点击事件
    clickNode: function(node){
      // eslint-disable-next-line
      console.log(node)
    },
  },
  created() {
    const _this = this
    // 从后端获取数据
    this.$http.get('http://localhost:8081/people/treeJson',{}).then(function (resp) {
      console.log(resp.data)
      _this.data = resp.data.data[0]
    })
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
#app .avat{border-radius: 2em;border-width:2px;}
#app .name{font-weight:700;}
#app .rootNode .name{
  color: red;
}

.foot a{color:#fff;margin:0 .5em}
</style>